<template>
  <div class="container">
    <div class="bread">
      <el-breadcrumb v-if="subject.id && subject.name" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subject.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input v-model="requestParams.directoryName" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="requestParams.state">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="plain" @click="clear()">清除</el-button>
            <el-button type="primary" @click="search()">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6" style="text-align:right">
        <el-button v-if="subject.id && subject.name" type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
        <el-button type="success" icon="el-icon-edit" class="list" @click="showAdd()">新增目录</el-button>
      </el-col>
    </el-row>
    <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon :closable="false" />
    <template>
      <el-table
        highlight-current-row
        style="width: 100%"
        :data="lists"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="username"
          label="创建者"
          align="center"
        />
        <el-table-column
          label="创建日期"
          align="center"
          width="250px"
        >
          <template v-slot="{row}">{{ row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
          align="center"
        />
        <el-table-column
          prop="state"
          label="状态"
          align="center"
        >
          <template v-slot="{row}">{{ row.state === 1?'已启用':'已禁用' }}</template>
        </el-table-column>
        <el-table-column property="operate" label="操作" width="180" align="center">
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="changeState(row)">{{ row.state === 1?'禁用':'启用' }}</el-button>
            <el-button type="text" size="small" :disabled="row.state === 1" @click="showAdd(row)">修改</el-button>
            <el-button type="text" size="small" :disabled="row.state === 1" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="requestParams.pagesize"
        :current-page="requestParams.page"
        :page-sizes="[5,10,20,50]"
        @size-change="handleSizeChange"
        @current-change="currChange"
      />
    </template>
    <DirectorysAdd ref="DirectorysAdd" :data="currentList" :show-dialog.sync="showDialog" @updateList="updateList()" />
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    DirectorysAdd
  },
  data() {
    return {
      lists: [],
      requestParams: {
        page: 1,
        pagesize: 10,
        state: null,
        directoryName: null,
        subjectID: ''
      },
      total: 0,
      currentList: {},
      showDialog: false
    }
  },
  computed: {
    subject() {
      return this.$route.query || {}
    }
  },
  watch: {
    watch: {
      '$route.query': () => {
        this.getSubjectList()
      }
    }
  },
  created() {
    this.getSubjectList()
  },
  methods: {
    // 学科列表
    async getSubjectList() {
      this.requestParams.subjectID = this.$route.query.id
      const { data } = await list(this.requestParams)
      // console.log(data)
      this.lists = data.items
      this.total = data.counts
      // this.pagesize = data.pagesize
      // this.page = data.page
    },
    // 清空关键字输入框
    clear() {
      this.requestParams.state = ''
      this.requestParams.directoryName = ''
    },
    // 搜索筛选
    search() {
      this.requestParams.page = 1
      this.getSubjectList()
    },
    // 输入切换页面
    handleSizeChange(val) {
      this.requestParams.directoryName = ''
      this.requestParams.pagesize = val
      this.getSubjectList()
    },
    // 点击切换页面
    currChange(val) {
      this.requestParams.directoryName = ''
      this.requestParams.page = val
      this.getSubjectList()
    },

    // 删除
    async del(id) {
      try {
        await this.$confirm('确认删除？', '温馨提示', { type: 'warning' })
      } catch {
        return
      }
      await remove(id)
      this.$message.success('删除成功')
      this.getSubjectList()
    },
    // 切换状态
    async changeState(row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    },
    // 显示弹窗
    showAdd(data = {}) {
      console.log(data)
      this.currentList = data
      this.showDialog = true
      this.$refs.DirectorysAdd.formData = { ...this.currentList }
    },
    // close() {
    //   this.showDialog = false
    // },
    updateList() {
      if (!this.currentList.id) {
        this.requestParams.page = 1
      }
      this.getSubjectList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 10px;
  .bread{
    margin-bottom: 10px;
  }
  .page{
    text-align: right;
    margin-top: 10px;
  }
}
</style>
